<template>
  <div class="AuthorPage">
    <!-- 最顶部背景图 -->
    <div class="AuthorPage-Top">
      <!-- 返回 -->
      <van-nav-bar @click-left="ReturnTop" left-arrow :border="false">
      </van-nav-bar>
      <div class="AuthorPage-author-img">
        <img :src="authorList.avatar" alt="找不到图片" />
      </div>
    </div>
    <!-- 作者信息 -->
    <div class="AuthorPage-author">
      <div>
        <h3>{{ authorList.name }}</h3>
        <p>{{ authorList.text_desc }}</p>
        <span>{{ authorList.introduction }}</span>
      </div>
    </div>
    <!-- 合辑推荐 -->
    <div class="AuthorPage-albums"></div>
    <!-- 主讲节目 -->
    <p class="AuthorPage-title">主讲节目</p>
    <div
      v-for="item in contentsList"
      :key="item.id"
      class="AuthorPage-contents"
      @click="GoBookDetailsView(item.id)"
    >
      <img :src="item.background_img" alt="" />
      <div>
        <van-divider
          :style="{
            margin: '0',
            borderColor: '#ccc',
          }"
          content-position="left"
          >{{ item.author }}</van-divider
        >
        <p>{{ item.title }}</p>
        <p>{{ item.subtitle }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { authorPage } from "@/api/request";
export default {
  name: "AuthorPage",
  data() {
    return {
      authorId: 0,
      authorList: [],
      albumsList: [],
      contentsList: [],
    };
  },
  activated() {
    this.authorId = this.$route.query.authorId;
    // 请求作者数据;
    authorPage({
      author_id: this.authorId,
    }).then(({ data }) => {
      this.authorList = data.data.author;
      this.albumsList = data.data.albums;
      this.contentsList = data.data.contents;
      console.log(data.data);
    });
  },
  methods: {
    // 传递节目参数给节目详情页
    GoBookDetailsView(id) {
      this.$router.replace({
        path: "/BookDetails",
        query: {
          id,
        },
      });
    },
    // 返回上一页按钮
    ReturnTop() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" >
.AuthorPage {
  // 头部
  .AuthorPage-Top {
    height: 120px;
    background-color: #3a5e81;
    position: relative;
    // 箭头
    .van-nav-bar {
      background-color: transparent;
      .van-nav-bar__left {
        .van-icon {
          color: white;
        }
      }
    }
    .AuthorPage-author-img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(0%);
      border: 0.1875rem solid white;
      border-radius: 50%;

      img {
        height: 6.25rem;
        width: 6.25rem;
        border-radius: 50%;
      }
    }
  }
  //   作者信息
  .AuthorPage-author {
    > div {
      padding: 0 0.875rem;
      text-align: center;
      font-size: 0.75rem;
      padding-top: 3.75rem;
      h3 {
        font-size: 1rem;
      }
      p {
        color: var(--fontcolor);
        line-height: 1.5rem;
      }
      span {
        line-height: 1.125rem;
      }
    }
  }
  //   主讲节目title
  .AuthorPage-title {
    padding: 0.875rem;
  }
  //   专辑
  .AuthorPage-albums {
  }
  //   主讲节目
  .AuthorPage-contents {
    padding: 0.625rem 0.875rem;
    display: flex;
    img {
      width: 5.625rem;
      height: 7.5rem;
    }
    div {
      width: 100%;
      font-size: 0.75rem;
      margin-left: 0.625rem;
      p:nth-child(2) {
        font-size: 0.9375rem;
        margin: 0.375rem 0;
        line-height: 1.25rem;
      }
    }
  }
}
</style>